<template>
  <el-container class="container">
    <el-header height=70px class="header">
      <el-row>
        <!-- <el-col :span="4">
          <div class="grid-content bg-purple">
            <img width="200" height="70" src="../../assets/image/logo.svg">
          </div>
        </el-col> -->
        <el-col :span="23" class="middle">
          <h1 class="title">DAILY规划记录平台</h1>
        </el-col>
        <el-col :span="1">
          <div class="grid-content bg-purple">
            <!-- <el-button type="primary" class="loginOut" @click="handleSignOut()">退出</el-button> -->
            <img style="cursor:pointer" title="退出" alt="退出" width="45" height="55" src="../../assets/image/logout.svg" @click="handleSignOut()">
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside class="aside" width="300px">
        <!--侧边栏-->
        <el-menu
          :router="true"
          :unique-opened="true"
        >
          <el-menu-item index="home">
             <i class="el-icon-house"></i>
           <span slot="title">首页</span>
          </el-menu-item>
          <!--2-->
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item index="userInfo">
              <i class="el-icon-setting"></i>
              <span>用户列表</span>
            </el-menu-item>
          </el-submenu>
          <!--3-->
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              <span>出行攻略</span>
            </template>
            <el-menu-item index="walking">
              <i class="el-icon-moon"></i>
              <span>选择步行</span>
            </el-menu-item>
            <el-menu-item index="bicycle">
              <i class="el-icon-bicycle"></i>
              <span>单车出行</span>
            </el-menu-item>
            <el-menu-item index="electrcars">
              <i class="el-icon-bicycle"></i>
              <span>电动车出行</span>
            </el-menu-item>
            <el-menu-item index="subwaybus">
              <i class="el-icon-truck"></i>
              <span>公交地铁</span>
            </el-menu-item>
          </el-submenu>
          <el-menu-item index="billing">
            <i class="el-icon-notebook-1"></i>
            <span slot="title">学习笔记</span>
          </el-menu-item>
          <el-menu-item index="surrounding">
            <i class="el-icon-s-promotion"></i>
            <span slot="title">出行周边</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main class="main">
        <el-row v-if="this.$store.state.isHomeRouter||isShowHomeImag">
          <el-col :span="10">
            <h1 class="text-jumbo text-ginormous">Oh man!</h1>
              <h2>此页面还未开发哦！</h2>
                <h6>&nbsp;</h6>
                <img  src="../../assets/image/home.svg" width="90%" height="50%" title="玛卡巴卡" alt="u know what i say due">
            </el-col>
            <el-col :span="14">
              <img :src="errGif" width="100%" height="100%" title="玛卡巴卡" alt="keep real man">
            </el-col>
        </el-row>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import errGif from '../../assets/image/401.png'
// var that
  export default {
    data () {
      return {
        errGif: errGif + '?' + +new Date(),
        isShowHomeImag:''
      }
    },
    watch:{
      //路由监听
      '$route':function(){
        console.log('watch里面',this.$route.name);
        if(this.$route.name === 'home'){
          // this.isHomeRouter = true;
          this.$store.state.isHomeRouter = true
          this.isShowHomeImag = true
        }else{
          this.$store.state.isHomeRouter = false;
          this.isShowHomeImag = false
        }
        console.log(this.$store.state.isHomeRouter,'监听路由变化')
        console.log(this.isShowHomeImag,'isShowHomeImag监听路由变化')
      },
      //state值监听isHomeRouter
      "$store.state.isHomeRouter":function (val) {
        console.log(val,'state值监听isHomeRouter')
      }
    },
    created() {
      this.$store.state.isHomeRouter = this.isShowHomeImag
      this.isShowHomeImag = this.$route.params.showFlag
      // 页面载入时本地存储中有 state 则用本地state赋值到 vuex 中的 state
      sessionStorage.getItem('state') && this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('state'))));
      //进行页面刷新时存储 store.state 数据存储到sessionStorage中
      window.addEventListener('beforeunload', () => {
        sessionStorage.setItem('state',JSON.stringify(this.$store.state));
      })
      //打印
      console.log(this.$store.state.isHomeRouter,'页面刷新时候的值')
    },
    methods: {
      handleSignOut () {
        /**
         * 1.清除token
         * 2.提示信息
         * 3.来到login组件
         * */
        localStorage.clear()
        this.$message.success('退出成功')
        this.$router.push('/')
      }
    }
  }
</script>
<style>
  .container {
    height: 100%;
  }

  .header {
    background-color: #151A3C;
  }
  .title{
    color: #e9eef3;
  }

  .aside {
    background-color:white;
  }

  .main {
    background-color: white;
  }

  /*头部样式*/
  .middle {
    text-align: center;
  }

  .loginOut {
    line-height: 10px;
    margin-top: 10px;
    text-decoration: none;
  }
  .text-jumbo {
    font-size: 60px;
    font-weight: 700;
    color: #484848;
  }
</style>
